import { fromEvent, Subject } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { BorderType } from '../variate';
import { createElement } from '../../../utils/dom-helper';
const instance: ASelectIcon[] = [];
let mask: HTMLElement = createElement('div', 'z-select-mask');
export abstract class ASelectIcon {
    protected abstract createValue(evt: MouseEvent): any;
    protected abstract createEles():void;
    protected parentSub: {statueChange$: Subject<{[key: string]: any}>};
    protected abstract statusChange(value: {[key: string]: any}):void;
    protected trigger: (val: BorderType) => void;
    protected parentIconContainer: HTMLElement;
    protected container: HTMLElement;
    protected mask: HTMLElement;
    constructor() {
        instance.push(this);
    }
    public init(func: (val: any) => {}, iconEle: HTMLElement, parent: {statueChange$: Subject<{[key: string]: any}>}) {
        this.parentSub = parent;
        this.parentSub.statueChange$.subscribe(res => {
            this.statusChange(res);
        });
        this.parentIconContainer = iconEle;
        this.trigger = func;
        this.container = createElement('span', {'class': `select-container`});
        iconEle.appendChild(this.container);
        this.container.style.display = 'none';
        this.createEles();
        fromEvent<MouseEvent>(this.container, 'click')
        .pipe(filter((evt) => {
            return (<HTMLElement>evt.target).hasAttribute('zVal')
        }))
        .pipe(map(evt => {
            evt.stopPropagation();
            return this.createValue(evt);
        }))
        .subscribe(res => {
            this.trigger.apply(this.parentSub, [res]);
        });
        setTimeout(() => {
            let hasMask = document.querySelector('.z-select-mask');
            if(hasMask == null) {
                // console.log(document.querySelector('.tool-container'))
                document.querySelector('.tool-container').appendChild(mask);
            }
            this.mask = mask;
            this.mask.addEventListener('click', () => {
                this.close();
            });
        });
    }
    protected appendChilds(container: HTMLElement, children: HTMLElement[]) {
        for(let child of children) {
            container.appendChild(child);
        }
    }
    public show() {
        if(this.container.style.display == 'none') {
            this.container.style.display = 'block';
            setTimeout(() => {
                let parentWidth = this.parentIconContainer.clientWidth;
                let width = this.container.clientWidth + 2;
                this.container.style.left = String(-width/2 + parentWidth / 2 + 1) + 'px';
                this.container.style.top = String(this.parentIconContainer.clientHeight + 8) + 'px';
            });
            for(let select of instance) {
                if(select !== this) {
                    select.close();
                }
            }
            this.mask.style.display = 'block';
        } else {
            this.container.style.display = 'none';
        }
    }
    public close() {
        this.container.style.display = 'none';
        this.mask.style.display = 'none';
    }
}